<template>
  <div class="werty">
    <section class="zhuhe">
          <ul>
              <li v-for='(v,i) in list' :key='i'>{{v.name}}</li>
          </ul>
          <div class="right-he">
          <div class="he-top">
              <p><span>热销</span>大家喜欢吃、才叫真好吃</p>
          </div>
          <div v-for='(a,b) in aa' :key='b' class="youhe">
              <div class="ctn">
                      <div class="you-left"><img :src="a.imgUrl"></div>
                      <div class="you-right">
                          <h1>{{a.ming}}</h1>
                          <p>{{a.wenzi}}</p>
                          <p class="zuti">{{a.xiao}}</p>
                          <p class="jiage"><span class="sp1">{{a.jia}}</span><span class="iconfont icon-wuuiconxiangjifangda sp2"></span></p>
                      </div>
              </div>
          </div>
          </div>
      </section> 
  </div>
</template>

<script>
    export default {
      name : 'app',
      data : function () {
        return {
          // tilie: "wert",
            list: [
                {name:"必选品(必点口味汤底+餐盒)"},
                {name:"热销"},
                {name:"优惠"},
                {name:"大家好，我是觉姐"},
                {name:"觉姐必点招牌"},
                {name:"觉姐特色推荐"},
                {name:"觉姐重口味"},
                {name:"觉姐劲爆优惠"},
                {name:"觉姐的小鲜肉"},
                {name:"想减肥来选我吧"},
                {name:"吃豆腐你懂的我"},
                {name:"觉姐家的饮料区"},
                {name:"觉姐最爱"},
                {name:"觉姐小秘书"}               
            ],

             aa:[
                {
                    imgUrl:"https://fuss10.elemecdn.com/8/b6/77d96b9e06cc7f9c8b9fcfb96bc50jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
                    ming:"微辣黄焖鸡+米饭",
                    wenzi:"月售2160份 好评率97%",
                    xiao:"6.7折",
                    jia:"￥19.9"
                },
                {
                    imgUrl:"https://fuss10.elemecdn.com/a/fc/54c432557fe46502db86a45096911jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
                     ming:"微辣黄焖鸡+米饭",
                    wenzi:"月售2160份 好评率97%",
                    xiao:"6.7折",
                    jia:"￥19.9"
                },
                {
                    imgUrl:"https://fuss10.elemecdn.com/8/b6/77d96b9e06cc7f9c8b9fcfb96bc50jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
                      ming:"微辣黄焖鸡+米饭",
                    wenzi:"月售2160份 好评率97%",
                    xiao:"6.7折",
                    jia:"￥19.9"
                },
                {
                    imgUrl:"https://fuss10.elemecdn.com/8/b6/77d96b9e06cc7f9c8b9fcfb96bc50jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
                      ming:"微辣黄焖鸡+米饭",
                    wenzi:"月售2160份 好评率97%",
                    xiao:"6.7折",
                    jia:"￥19.9"
                },
                {
                    imgUrl:"https://fuss10.elemecdn.com/8/b6/77d96b9e06cc7f9c8b9fcfb96bc50jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
                      ming:"微辣黄焖鸡+米饭",
                    wenzi:"月售2160份 好评率97%",
                    xiao:"6.7折",
                    jia:"￥19.9"
                },
                {
                    imgUrl:"https://fuss10.elemecdn.com/8/b6/77d96b9e06cc7f9c8b9fcfb96bc50jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
                      ming:"微辣黄焖鸡+米饭",
                    wenzi:"月售2160份 好评率97%",
                    xiao:"6.7折",
                    jia:"￥19.9"
                },
                {
                    imgUrl:"https://fuss10.elemecdn.com/8/b6/77d96b9e06cc7f9c8b9fcfb96bc50jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
                      ming:"微辣黄焖鸡+米饭",
                    wenzi:"月售2160份 好评率97%",
                    xiao:"6.7折",
                    jia:"￥19.9"
                },
                {
                    imgUrl:"https://fuss10.elemecdn.com/8/b6/77d96b9e06cc7f9c8b9fcfb96bc50jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
                      ming:"微辣黄焖鸡+米饭",
                    wenzi:"月售2160份 好评率97%",
                    xiao:"6.7折",
                    jia:"￥19.9"
                }
             ]
        }
      }
    }
</script>
<style scoped lang="less">
.px2rem(@name, @px) {
  @{name}: @px / 75 * 1rem;
}
   .werty{
       .zhuhe{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        ul{
            width: 23%;
            background: #CCCCFF;
            position: sticky;
            top: 20px;
            .px2rem(padding-bottom,240);
            .px2rem(height,1120);
            li{
                width: 100%;
                .px2rem(height,146);
                .px2rem(font-size,32);
                display: flex;
                justify-content: center;
                align-items: center;
                border-bottom: 1px solid #555;
            }
            li:last-child{
                border-bottom: none;
            }
        }
        .right-he{
            width: 77%; 
            .px2rem(padding-bottom,170);
            .he-top{
                width: 100%;
            .px2rem(height,115);
                p{
                    .px2rem(font-size,34);
                    color: #555;
                    line-height: 2;
                    .px2rem(padding-left,20);
                    box-sizing: border-box;
                    span{
                        .px2rem(font-size,40);
                        font-weight: bold;
                        color: #000;
                    }
                }
            }      
            .youhe{
                width: 100%;
                .px2rem(padding-bottom,30);
                .ctn{
                    width: 100%;
                    display: flex;
                        .you-left{
                            width: 30%;
                            .px2rem(height,230);
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            img{
                                .px2rem(width,150);
                                .px2rem(height,160);
                            }
                        }
                        .you-right{
                            width: 70%;
                            .px2rem(height,230);
                            h1{
                                .px2rem(font-size,36);
                                font-weight: bold;
                            }
                            p{
                                line-height: 1.7;
                                .px2rem(font-size,32);
                                color: #555;
                            }
                            .zuti{
                                .px2rem(font-size,36);
                                color: #555;
                                line-height: 1.5;
                            }
                            .jiage{
                                display: flex;
                                .sp1{
                                    width: 70%;                  
                                    .px2rem(font-size,40);
                                    color: #CC0033;
                                    font-weight: bold;
                                    line-height: 2;
                                }
                                .sp2{
                                    flex: 1;
                                    .px2rem(font-size,50);
                                    color: #3333FF;
                                }
                            }
                        }
                }
            
            }
        }
    }
   }



</style>
